<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>checkbox</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/layuiadmin/layui/css/layui.css" media="all">
    <style>
        .traffic_firstLevel span{font-weight:bold;}
        .traffic_limitBox{display:flex; flex-direction:row; justify-content:flex-start; align-items:center; align-content:center; height:100%; width:100%;}
        .traffic_limitBox {display:flex; flex-direction:row-reverse; justify-content:flex-end; align-items:center; align-content:center; height:100%; width:100%;}
        .traffic_limitBox {left:0; right:auto; flex-shrink: 0;}
        .traffic_marleft26{margin-left:30px;}
        .traffic_clear_mg{margin:0;}					/*清除外边距*/
    </style>

</head>
<body class="childrenBody">
<div class="layui-tab-content site-demo site-demo-body">
    <blockquote class="layui-elem-quote title traffic_menu_blockquote traffic_pad_8">
        <div class="traffic_menu_size16 traffic_alignSelf">选择学生</div>
        <div class="traffic_menu_size14">
            <div class="layui-inline">
                <button class="layui-btn traffic_bgd_275" id="subBtn">确 定</button>
            </div>
        </div>
    </blockquote>
    <form class="layui-form" >
        <input type="hidden" name="id" id="id" value="${id}">
        <c:forEach items="${classes}" var ="one">
            <div class="layui-form-item traffic_clear_mg">
                <div class="layui-input-block traffic_clear_mg traffic_firstLevel" onclick="toCheck(${one.id})">
                    <input type="checkbox" value="0" lay-skin="primary" id="check${one.id}"  lay-filter="c_all"  title="${one.name}" >
                </div>
            </div>
            <div class="layui-form-item traffic_marleft26">
                <c:forEach items="${one.studentList}" var="two">
                    <div class="layui-input-inline traffic_clear_mg traffic_limitBox">
                        <input type="checkbox" name="studentt" class="checked${one.id}" value="${two.id}"  lay-skin="primary" title="${two.name}" >
                    </div>
                </c:forEach>
            </div>
        </c:forEach>
    </form>
</div>
<script type="text/javascript" src="<%=request.getContextPath()%>/static/layuiadmin/layui/layui.js"></script>
<script type="text/javascript">
    var $;
    layui.use(['layer', 'form','element','jquery'], function(){
        var layer = layui.layer,
            form = layui.form;
            $ = layui.jquery;
            element = layui.element;

        $('#subBtn').click(function () {
                var mid="";
                $.each($('input:checkbox:checked'),function(){
                    mid+=$(this).val()+",";
                });
            $("#studentIds", window.parent.document).attr("value", mid);

            layer.msg("选择成功");
                setTimeout(function(){
                    var index=parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                },1000)
            });
    });

    function toCheck(id){
        if($('#check'+id).is(":checked")){//选中
            $(".checked"+id).siblings().addClass("layui-form-checked");
            $(".checked"+id).prop("checked",true);
        }else{//移除
            $(".checked"+id).siblings().removeClass("layui-form-checked");
            $(".checked"+id).prop("checked",false);
        }
    }
</script>
</body>
</html>
